<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('人口库核查管理')" />
</head>
<input name="userid" th:value="${session.userid}" type="hidden" id="userid">
<input name="username" th:value="${session.username}" type="hidden" id="username">
<input name="deptid" th:value="${session.deptid}" type="hidden" id="deptid">
<body class="gray-bg">
     <div class="container-div">
        <div class="row" id="renkouhechapici">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label style="width: 80px;">核查批次名称&nbsp;&nbsp;</label>
                                <input style="width: 150px !important;" type="text" name="picimingcheng"  v-model="picimingcheng"/>
                            </li>
                            <li>
                                <label style="width: 80px;">创建时间&nbsp;&nbsp;</label>
                                <input style="width: 150px !important;" type="text" class="" v-model="chuangjianshijian" placeholder="请选择创建时间" name="chuangjianshijian" id="chuangjianshijian_chaxun" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" @blur="getDate_chaxun"/>
                            </li>
                            <li class="sousuo">
                                <a class="btn btn-success btn-md" @click="bindPiciList"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-md" @click="refresh"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 select-table table-striped">

                <div v-if="deptid==0" id="toolbar" role="group" style="margin-top: 10px;margin-bottom: 20px;">
                    <button class="btn btn-primary dim" @click="toAdd">
                        <i class="fa fa-plus"></i> 添加
                    </button>
                    <a class="btn btn-info dim" href="https://ceshi.chinapostdoctor.org.cn/profile/muban/renkoukuhecha.xlsx">
                        <i class="fa fa-download"></i> 模板下载
                    </a>
                </div>

                <table id="bootstrap-table" class="table-bordered table table-hover table-primary table-striped">
                    <thead>
                    <tr>
                        <th style="text-align: center; vertical-align: middle;">序号</th>
                        <th style="text-align: center; vertical-align: middle;">批次名称</th>
                        <th style="text-align: center; vertical-align: middle;">创建时间</th>
                        <th style="text-align: center; vertical-align: middle;">总人数</th>
                        <th style="text-align: center; vertical-align: middle;">未核查人数</th>
                        <th style="text-align: center; vertical-align: middle;">已核查人数</th>
                        <th style="text-align: center; vertical-align: middle;">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(piciitem,index) in picilist"  v-if="picilist.length > 0">
                        <td style="vertical-align: middle; text-align: center;" v-text="index+1"></td>
                        <td style="vertical-align: middle; text-align: center;" v-text="piciitem.picimingcheng"></td>
                        <td style="vertical-align: middle; text-align: center;" v-text="piciitem.kaishishijian"></td>
                        <td style="vertical-align: middle; text-align: center;" v-text="piciitem.renshu"></td>
                        <td style="vertical-align: middle; text-align: center;" v-text="piciitem.weihecha"></td>
                        <td style="vertical-align: middle; text-align: center;" v-text="piciitem.yihecha"></td>
                        <td style="vertical-align: middle; text-align: center;" v-text="">
                            <button class="btn btn-warning btn-md" @click="showUploadXls(piciitem.id)" v-if="deptid==0">导入核查数据</button>
                            <button class="btn btn-success btn-md" @click="toManage(piciitem)">浏览</button>
                            <!--<button class="btn btn-warning btn-rounded btn-md" @click="toModify(piciitem.id)">修改</button>-->
                            <button class="btn btn-danger btn-md" @click="Delete(piciitem.id)" v-if="deptid==0">删除</button>
                        </td>
                    </tr>
                    <tr v-if="picilist.length == 0">
                        <td style="text-align: center; vertical-align: middle" colspan="7">查无数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>


            <!-- 编辑去世确认批次信息 -->
            <div th:replace="system/zhuanjia/modal_renkouhechaedit::pici_edit"></div>

            <!-- 上传模态框（Modal） -->
            <div id="uploadModal" class="modal fade bs-example-modal-lg"
                 tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-md" style="width: 800px">
                    <div class="modal-content" style="width: 800px">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;
                            </button>
                            <h3 class="modal-title" id="myDetailModalLabel"></h3>
                        </div>
                        <div class="modal-body" id="uploadModal-body" style="width: 800px;margin:0px auto;">
                        </div>
                    </div>
                </div>
            </div>

            <!--导入预览-->
            <div th:fragment="edits" >
                <div id="QushilistModal" style="" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
                     aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                    <div class="modal-dialog modal-md" style="width: 1500px;height:400px;">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-hidden="true">&times;</button>
                                <h4 class="modal-title">查看导入名单</h4>
                            </div>
                            <div class="modal-body" style="height: 400px;overflow: scroll;">
                                <table class="table table-hover table-striped" style="width:1150px;margin: 0 auto;" id="list_qushiqueren">
                                    <thead>
                                    <th style="text-align: center; vertical-align: middle;width:50px;">序号</th>
                                    <!--<th style="text-align: center; vertical-align: middle;width:100px;">专家ID</th>-->
                                    <th style="text-align: center; vertical-align: middle;width:100px;">姓名</th>
                                    <!--<th style="text-align: center; vertical-align: middle;width:100px;">单位代码</th>-->
                                    <th style="text-align: center; vertical-align: middle;width:100px;">所属单位</th>
                                    <th style="text-align: center; vertical-align: middle;width:100px;">工作单位</th>
                                    <th style="text-align: center; vertical-align: middle;width:100px;">身份证号</th>
                                    <th style="text-align: center; vertical-align: middle;width:100px;">死亡（注销）标识</th>
                                    <th style="text-align: center; vertical-align: middle;width:100px;">死亡日期</th>
                                    <th style="text-align: center; vertical-align: middle;width:100px;">备注</th>
                                    <th style="text-align: center; vertical-align: middle;width:100px;">导入状态</th>
                                    <th style="text-align: center; vertical-align: middle;width:100px;">操作</th>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(qushiitem,index) in qushiquerens">
                                        <td style="text-align: center; vertical-align: middle;"
                                            v-text="index+1"></td>
                                        <!--<td style="text-align: center; vertical-align: middle;">
                                            <input v-model="qushiitem.专家ID"></td>-->
                                        <td style="text-align: center; vertical-align: middle;">
                                            <input v-model="qushiitem.姓名"></td>
                                        <!--<td style="text-align: center; vertical-align: middle;">
                                            <input v-model="qushiitem.单位代码"></td>-->
                                        <td style="text-align: center; vertical-align: middle;">
                                            <input v-model="qushiitem.所属单位"></td>
                                        <td style="text-align: center; vertical-align: middle;">
                                            <input v-model="qushiitem.工作单位"></td>
                                        <td style="text-align: center; vertical-align: middle;">
                                            <input v-model="qushiitem.身份证号"></td>
                                        <td style="text-align: center; vertical-align: middle;">
                                            <input v-model="qushiitem.死亡标识"></td>
                                        <td style="text-align: center; vertical-align: middle;">
                                            <input v-model="qushiitem.死亡日期"></td>
                                        <td style="text-align: center; vertical-align: middle;">
                                            <input v-model="qushiitem.备注"></td>
                                        <td style="text-align: center; vertical-align: middle;"
                                            class="daoruzhuangtai" :id="index+1"></td>
                                        <td style="text-align: center; vertical-align: middle;">
                                            <button class="btn btn-sm btn-primary"  @click="dangedaoru(qushiitem,index+1)">导入</button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div style="width:100%;height:100px;text-align:center;">
                                <button id="daoru" class="btn btn-lg btn-info" style="margin-top:30px;" @click="importQushi()">批量导入</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal -->
                </div>
            </div>

        </div>
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: datetimepicker-js" />
     <script th:src="@{/js/plupload/plupload.js?v=1.0}"></script>
     <script th:src="@{/js/plupload/plupload.full.js?v=1.0}"></script>
    <script>
        var vm_renkouhechapici = new Vue({
            el : "#renkouhechapici",
            data : {
                deptid : $("#deptid").val(),		// 单位ID
                piciid : "",		// 批次ID

                picilist : [],// 列表custom
                piciid : '',//id
                pici : {},//表

                //查询用字段
                picimingcheng : '',
                chuangjianshijian : '',

                editflag : '',//1添加 2修改

                pageindex : 1,		// 查询分页初始化页
                pagesize : 10,		// 查询分页初始化页面大小
                pageCount : 0,		// 总页数
                recordCount : 0,	// 总记录数
                targetpage : '', 	// 目标页

                qushiquerens: [],
            },
            created : function(){
                var _this = this;

                _this.bindPiciList();
                setInterval(function(){
                    _this.bindPiciList();
                },5000);

            },
            watch : {
                //监控分页情况，刷新列表
                pageindex : function(){
                    this.bindPiciList();
                },

                pagesize : function(){
                    //
                    this.bindPiciList();
                },
            },
            methods : {

                // 根据单位ID查询专家变动申请信息
                bindPiciList : function(){
                    var _this = this;

                    $.post('/system/renkouhechapici/list', {
                        picimingcheng : _this.picimingcheng,
                        kaishishijian : _this.chuangjianshijian,
                        rdm : Math.random()
                    },function(ppData) {

                        if (ppData.code == 0) {
                            var data = ppData.rows;
                            _this.picilist = data;

                            // var pageInfo = data.PageInfo;
                            // _this.pageindex = pageInfo.pageIndex;
                            // _this.pageCount = pageInfo.pageCount;
                            // _this.recordCount = pageInfo.recordCount;
                            // _this.targetpage = '';
                        }
                    },"json");
                },

                bindPici : function(){
                    var _this = this;

                    var pici_layer = layer.open({type:3});
                    $.post('/system/renkouhechapici/findone', {
                        id : _this.piciid,
                        rdm : Math.random()
                    },function(ppData) {
                        layer.close(pici_layer);

                        if(ppData != null){

                            if(ppData.result == "1"){
                                var data = ppData.resultContent;
                                _this.pici = data;
                                _this.pici.id = _this.piciid;
                            }else{
                                layer.alert(ppData.message);
                            }
                        }
                    },"json");
                },

                toAdd:function(){
                    var _this = this;

                    $("#myModalLabel").html("添加人口库核查批次");
                    $("#modal-dialog").attr("style", "width:1200px;");
                    $("#piciModal").modal();

                    this.pici = {};
                    this.editflag = 1;
                },

                //添加
                add:function(){
                    var _this = this;
                    if (_this.checkInputData()) {
                        var pici_layer = layer.open({type: 3});
                        $.post('/system/renkouhechapici/add', {
                            picimingcheng : _this.pici.picimingcheng,
                            rdm: Math.random()
                        }, function (ppData) {
                            layer.close(pici_layer);
                            if (ppData != null) {

                                if (ppData.code == "0") {
                                    layer.open({
                                        time: 1000,
                                        btn: [],
                                        content: "添加成功!",
                                    });

                                    _this.refresh();
                                    $("#piciModal").modal('hide');

                                } else {
                                    layer.alert(ppData.msg);
                                }
                            }
                        }, "json");
                    }
                },

                toModify:function(ppPiciId){

                    $("#myModalLabel").html("修改人口库核查批次");
                    $("#modal-dialog").attr("style","width:1200px;");
                    $("#piciModal").modal();

                    this.piciid = ppPiciId;

                    this.pici = {};
                    this.editflag = 2;
                    // 绑定变动
                    this.bindPici();
                },

                // 修改信息
                modify : function(){
                    var _this = this;
                    if (_this.checkInputData()) {
                        var pici_layer = layer.open({type: 3});
                        $.post('/system/renkouhechapici/edit', {
                            id: _this.piciid,
                            picimingcheng : _this.pici.picimingcheng,
                            rdm: Math.random()
                        }, function (ppData) {
                            layer.close(pici_layer);
                            if (ppData != null) {

                                if (ppData.code == "0") {
                                    layer.open({
                                        time: 1000,
                                        btn: [],
                                        content: "修改成功!",
                                    });

                                    _this.refresh();
                                    $("#piciModal").modal('hide');

                                } else {
                                    layer.alert(ppData.msg);
                                }
                            }
                        }, "json");
                    }
                },

                Delete:function(ppId){
                    var _this = this;


                    if (confirm("确定要删除吗？")) {
                        var pici_layer = layer.open({type:3});
                        $.post('/system/renkouhechapici/delete', {
                            id: ppId,
                            rdm: Math.random()
                        }, function (ppData) {
                            layer.close(pici_layer);

                            if (ppData != null) {

                                if (ppData.code == "0") {
                                    layer.open({
                                        time: 1000,
                                        btn: [],
                                        content: "删除成功!",
                                    });

                                    _this.refresh();
                                } else {
                                    layer.alert(ppData.msg);
                                }
                            }
                        }, "json");
                    }
                },

                //检查项目数据
                checkInputData : function() {
                    if (!$.trim(this.pici.picimingcheng)) {
                        layer.alert("请人口库核查批次名称！");
                        return false;
                    }

                    return true;
                },

                getDate_chaxun:function(){
                    var _this = this;

                    _this.chuangjianshijian=$("#chuangjianshijian_chaxun").val();
                },

                refresh:function(){
                    var _this = this;

                    this.picimingcheng=""
                    this.chuangjianshijian=""
                    // 刷新页面
                    _this.bindPiciList();
                },

                toManage : function(piciitem){
                    $.modal.openTab(piciitem.picimingcheng+"详情",'/system/zhuanjia/renkouhechalist?piciid='+piciitem.id,false);
                },

                //首页
                firstPage : function(){
                    this.pageindex = 1;
                },
                //尾页
                lastPage : function(){
                    this.pageindex = this.pageCount;
                },
                //上一页
                prePage : function(){
                    var prePage = ((this.pageindex -1) <= 0) ? 1 : (this.pageindex -1);
                    this.pageindex = prePage;
                },
                //下一页
                nextPage : function(){
                    var nextPage = ((this.pageindex +1) >= this.pageCount) ? this.pageCount : (this.pageindex +1);
                    this.pageindex = nextPage;
                },
                //跳到目标页
                targetPage : function() {
                    if( this.targetpage != '' && this.targetpage <= this.pageCount && this.targetpage > 0){
                        this.pageindex = this.targetpage;
                        this.targetpage = '';
                    }
                },

                // 显示上传xls的模态框
                showUploadXls: function (piciid) {
                    var _this = this;
                    _this.piciid = piciid;

                    $("#uploadModal").modal("show");
                    this.getFileUrl("qushiqueren", '51200', 'xls,xlsx');
                },

                // 将文件上传到指定地址,并接受返回过来的路径，
                getFileUrl: function (ppFolderName, ppFileSize, ppShangChuanWenJianLeiXing) {
                    var _this = this;
                    // load上传项目
                    $("#uploadModal-body").load("/system/upload_batch?fujianpath=/userfiles/" + ppFolderName + "&filesize=" + ppFileSize, function () {
                        UploadVue.Init(ppShangChuanWenJianLeiXing, ppFileSize + "kb", function (jsonList) {
                            if (jsonList.length == 0) {
                                return;
                            }
                            var filename = jsonList[0].filename;
                            var fileurl = jsonList[0].fileurl;
                            var filesize = jsonList[0].filesize;
                            _this.getValue(fileurl);
                        }, function () {
                            $("#uploadModal").modal("hide");
                        });
                    });
                },

                //
                getValue: function (ppFileurl) {
                    var _this = this;
                    layer.open({type: 3});

                    $.post("/system/renkouhecha/get_value", {
                        fileurl: ppFileurl,
                        random: Math.random()
                    }, function (ppData) {
                        layer.closeAll("loading");
                        if (ppData != null) {
                            var mmData = ppData;
                            var result = mmData.result;
                            var message = mmData.message;
                            var data = mmData.resultContent;

                            if (result == "1") {
                                $(".daoruzhuangtai").html("");
                                _this.qushiquerens = data;

                                $("#uploadModal").modal("hide");
                                $("#QushilistModal").modal("show");

                            } else {
                                layer.alert(message);
                            }
                        }
                    }, "json");
                },

                // 批量导入项目目录
                importQushi: function () {
                    var _this = this;

                    layer.confirm("确定要导入所有专家去世确认名单吗？", {
                        btn: ["是", "否"]
                    }, function () {
                        layer.closeAll("dialog");
                        // 开始批量导入
                        _this.startDaoru();
                    });
                },

                // 批量导入
                startDaoru: function () {
                    var _this = this;
                    layer.open({type: 3});
                    $("#daoru").attr("disabled", "disabled");
                    //从待导入专家第一个开始导入
                    _this.daoru(0);
                },

                // 单个导入
                daoru: function (ppQushiquerenCurrentIndex) {

                    layer.open({type: 3});
                    var _this = this;

                    var CurrentIndex = ppQushiquerenCurrentIndex + 1;

                    layer.open({
                        type: 3,
                        content: "<div style='font-size:18px;font-weight:bold;padding-top:40px;width:200px;text-align:left;'>正在导入专家去世确认名单<br/>当前进度    " + CurrentIndex + " / " + _this.qushiquerens.length + "</div>"
                    });

                    $.post("/system/renkouhecha/import", {
                        piciid : _this.piciid,
                        zhuanjiaid: _this.qushiquerens[ppQushiquerenCurrentIndex].专家ID,
                        xingming: _this.qushiquerens[ppQushiquerenCurrentIndex].姓名,
                        jigoudaima: _this.qushiquerens[ppQushiquerenCurrentIndex].单位代码,
                        suoshudanwei: _this.qushiquerens[ppQushiquerenCurrentIndex].所属单位,
                        gongzuodanwei: _this.qushiquerens[ppQushiquerenCurrentIndex].工作单位,
                        shenfenzhenghao: _this.qushiquerens[ppQushiquerenCurrentIndex].身份证号,
                        siwangbiaoji: _this.qushiquerens[ppQushiquerenCurrentIndex].死亡标识,
                        siwangriqi: _this.qushiquerens[ppQushiquerenCurrentIndex].死亡日期,
                        beizhu: _this.qushiquerens[ppQushiquerenCurrentIndex].备注,
                        random: Math.random()
                    }, function (ppData) {
                        layer.closeAll("loading");

                        if (ppData.result == "0") {
                            // 未成功导入
                            $("#" + (ppQushiquerenCurrentIndex + 1)).html("<span style='color:red;'>" + ppData.message + "</span>");
                            if (ppQushiquerenCurrentIndex >= _this.qushiquerens.length - 1) {
                                layer.alert("导入完成！");

                                $("#QushilistModal").modal("hide");
                                _this.bindPiciList();
                            } else {
                                ppQushiquerenCurrentIndex++;// 待导入高校下标+1

                                _this.daoru(ppQushiquerenCurrentIndex);
                            }

                            $("#daoru").removeAttr("disabled");
                        } else {
                            //成功导入
                            $("#" + (ppQushiquerenCurrentIndex + 1)).html("<span style='color:green;'>导入成功</span>");
                            if (ppQushiquerenCurrentIndex >= _this.qushiquerens.length - 1) {
                                $("#daoru").removeAttr("disabled");
                                layer.alert("导入完成！");

                                $("#QushilistModal").modal("hide");
                                _this.bindPiciList();

                            } else {
                                ppQushiquerenCurrentIndex++;// 待导入高校下标+1

                                _this.daoru(ppQushiquerenCurrentIndex);
                            }
                        }
                    }, "json")
                },

                // 单个手动导入
                dangedaoru: function (ppQushi, ppIndex) {
                    var _this = this;

                    layer.confirm("确定要导入该条专家去世核查信息吗？", {
                        btn: ["是", "否"]
                    }, function () {
                        layer.open({type: 3});
                        $.post("/system/renkouhecha/import", {
                            piciid:_this.piciid,
                            zhuanjiaid: ppQushi.专家ID,
                            xingming: ppQushi.姓名,
                            jigoudaima: ppQushi.单位代码,
                            suoshudanwei: ppQushi.所属单位,
                            gongzuodanwei: ppQushi.工作单位,
                            shenfenzhenghao: ppQushi.身份证号,
                            siwangbiaoji: ppQushi.死亡标识,
                            siwangriqi: ppQushi.死亡日期,
                            beizhu: ppQushi.备注,
                            random: Math.random()
                        }, function (ppData) {
                            layer.closeAll("loading");

                            if (ppData.result == "0") {
                                layer.alert(ppData.message);
                                _this.bindPiciList();
                                $("#" + ppIndex).html("<span style='color:red;'>" + ppData.message + "</span>");
                            } else {
                                layer.alert("导入成功！");
                                _this.bindPiciList();
                                $("#QushilistModal").modal("hide");
                                $("#" + ppIndex).html("<span style='color:green;'>导入成功</span>");
                            }
                        }, "json")
                    })
                },

            },
        })
    </script>
</body>
</html>